<template>
  <div class="toggleType">
    <div class="material-goods" :class="{'active': props.modelValue === 0}" @click="select(0)">商品素材</div>
    <!-- <div class="material-page" :class="{'active': props.modelValue === 1}" @click="select(1)">页面素材</div> -->
    <div class="material-page" :class="[props.isGoodsOnly ? 'disable' : props.modelValue === 1 ? 'active' : '']" @click="select(1)">页面素材</div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface Props {
  modelValue: number,
  isGoodsOnly: boolean
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: 0,
    isGoodsOnly: false
})
const emit = defineEmits(['update:modelValue', 'select'])
const updateValue = (type: number): void => {
  emit('update:modelValue', type)
}

const select = (type:number):void=>{
  if(props.isGoodsOnly){
    if(type === 0){
      emit('update:modelValue', type)
      emit('select', type)
    }
  }else{
    emit('update:modelValue', type)
    emit('select', type)
  }
}
</script>

<style lang="scss" scoped>
  .toggleType{
    display: flex;
    align-items: center;
    margin: 8px 0 16px;
    &>div{
      padding: 8px 12px;
      line-height: 1;
      background-color: #eee;
      border-radius: 6px;
      color: #666;
      font-weight: 600;
      &:hover{
        cursor: pointer;
        background-color: #FFF1ED;
        color: #FF6B00;
      }
    }
    .material-goods{
      margin-right: 12px;
    }
    .material-page{

    }
    .active{
      background-color: #FFF1ED;
      color: #FF6B00;
    }
    .disable:hover{
      cursor: not-allowed;
      background-color: #eee;
      color: #666;
    }
  }
</style>
